<template>
    <div>
        <div v-if="isAdd">
            <div class="pay-address b-g-f" @click="address(1)" v-if="JSON.stringify(list.addr) == '{}' || list.addr == null">
                <img src="../../../static/img/tianjia.png" alt="">
                <span class="nanshou">选择地址</span>
            </div>
            <div class="pay-address-xin b-g-f" @click="address(2)" v-else>
                <img src="../../../static/img/address.png" alt="">
                <div class="address-box">
                    <span class="shoujian-box">{{list.addr.name}} <em class="em-phone">{{list.addr.tel}}</em></span>
                    <span class="address-name">{{list.addr.address_all}}</span>
                </div>
            </div>
        </div>
        <ul class="clearfix">
            <li class="clearfix pay-left-box b-g-f" v-for="(item,index) in list.pro" :key="index">
                <img :src="item.photo_s" alt="">
                <div class="pay-right-box">
                    <span class="pay-right-title">{{item.name}}</span>
                    <span class="pay-right-num">
                        ￥{{item.price}}
                        <em class="pay-num">X{{item.num}}</em>
                    </span>
                </div>
                <div class="pay-right-heji-box">
                    <span class="pay-right-heji">
                        共{{item.num}}件商品
                        <em class="pay-heji">合计：￥{{item.num * item.price}}</em>
                    </span>
                </div>
            </li>
        </ul>
        <van-submit-bar :price="totalPrice"  button-text="微信支付" @submit="order()">
            <span class="bar-num">共{{num}}件</span>
        </van-submit-bar>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
            list:[],
            totalPrice:this.$route.query.total_amount * 100,
            num:0,
            isAdd:false
        }
    },
    components:{},
    mounted(){
        this.orderBuyShow()
    },
    methods:{
        // 显示列表
        orderBuyShow(){
            let parmes = {
                total_amount:this.$route.query.total_amount
            }
            if(this.$route.query.from == 'detail'){
                parmes.goods_id = this.$route.query.cart_ids
            }else{
                parmes.cart_ids = this.$route.query.cart_ids
            }
            this.$api.shopping.orderBuyShow(parmes).then(resp=>{
                if(resp.code == 1){
                    this.list = resp.data
                    this.list.pro.forEach(e =>{
                        if(this.$route.query.from == 'detail'){
                            e.num = 1
                        }
                        this.num += e.num
                    })
                    setTimeout(()=>{
                        this.isAdd = true
                    },10)
                }else{
                    Toast(resp.msg)
                }
            })
        },
        // 下单生成订单号
        order(){
            if(this.list.addr == null){
                Toast('请先添加一个地址')
                return
            }
            let parmes = {
                addr_id:this.list.addr.id,
                num:'1',
                remark:'尽快发货',
                total_amount:this.$route.query.total_amount
            }
            if(this.$route.query.from == 'detail'){
                parmes.goods_id = this.$route.query.cart_ids
                this.$api.shopping.orderGoodsAddOrder(parmes).then(resp=>{
                    if(resp.code == 1){
                        this.orderGetJsApiParam(resp.data.order_sn)
                    }
                })
            }else{
                parmes.cart_ids = this.$route.query.cart_ids
                this.$api.shopping.orderCartAddOrder(parmes).then(resp=>{
                    if(resp.code == 1){
                        this.orderGetJsApiParam(resp.data.order_sn)
                    }
                })
            }
            
        },
        // 微信支付生成
        orderGetJsApiParam(orderId){
            let parmes = {
                total_amount:this.$route.query.total_amount,
                order_sn:orderId
            }
            this.$api.shopping.orderGetJsApiParam(parmes).then(resp=>{
                if(resp.code == 1){
                    this.wxPay(resp.data)
                }else{
                    Toast(resp.msg)
                }
            })
        },
        wxPay(data){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',{
                    "appId": data.appId,     //公众号名称，由商户传入     
                    "timeStamp": data.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr": data.nonceStr, //随机串     
                    "package": data.package,     
                    "signType": data.signType,         //微信签名方式：     
                    "paySign": data.paySign //微信签名 
                },
                (res)=>{
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        Toast('支付成功')
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel" ) {
                        Toast('已取消支付')
                    } else {
                        Toast(res.err_msg)
                    }
                }
            )
        },
        // 地址跳转
        address(type){
            if(type == 1){
                this.$router.push({
                    name:'addAddress'
                })
            }else{
                this.$router.push({
                    name:'address'
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.pay-address{
    height: 120px;
    text-align: center;
    font-size: 38px;
    line-height: 120px;
    border-top: 20px solid #f5f5f5;
    color: #999;
    overflow: hidden;
    img{
        width: 50px;
        vertical-align: middle;
    }
    .nanshou{
        height: 120px;
        display: inline-block;
        line-height: 120px;
    }
}
.bar-num{
    font-size: 34px;
    color: #666;
}
</style>
